@extends('base.base')
@section('base')
<!-- 内容区域 -->
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">请填写发货信息</h4>
                        <form class="forms-sample" id="form">
                            <input type="hidden" class="form-control required" name="id" value="{{$id}}">
                            <div class="form-group"
                                style="display: flex;justify-content: flex-start;align-items: center;">
                                <label style="color: #999;display: block;margin-top: 7px;">选择类型</label>
                                <select onchange='selectChange(value)' class="select-list" name="type"
                                    style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 4.7vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;">
                                    <option value="1">发货</option>
                                    <option value="2">送货</option>
                                    <option value="3">虚拟</option>
                                </select>
                            </div>
                            <div class="form-group-list" style="width: 100%;height: 100%;">

                            </div>
                            <!-- <div class="form-group dlh" style="display: flex;justify-content: flex-start;align-items: center;">
                                <label style="color: #999;display: block;margin-top: 7px;">快递公司</label>
                                <select name="delivery_name" class="select-list" name="type" style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 3vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;">
                                    @foreach($list as $k=>$v)
                                    <option value="{{$v}}">{{$v}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group" style="display: flex;justify-content: flex-start;align-items: center;">
                                <label style="color: #999;display: block;margin-top: 7px;">快递单号</label>
                                <input class="select-list" name="type" style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 3vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;" type="number" class="form-control" name="delivery_id">
                            </div>
                            <div class="form-group delivery"> -->
                            <!-- <label>送货人姓名</label>
                                <input type="number" class="form-control" name="sh_delivery_name">
                            </div>
                            <div class="form-group">
                            <label>送货人电话</label>
                                <input type="number" class="form-control" name="sh_delivery_id">
                            </div> -->
                            <button type="button" onclick="commit()"
                                class="btn btn-sm btn-gradient-primary btn-icon-text">
                                <i class="mdi mdi-file-check btn-icon-prepend"></i>
                                提交
                            </button>
                            <button type="button" onclick="cancel()"
                                class="btn btn-sm btn-gradient-warning btn-icon-text">
                                <i class="mdi mdi-reload btn-icon-prepend"></i>
                                取消
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function commit() {
        if (!checkForm()) {
            return false;
        }
        var data = $("#form").serializeObject();
        console.log(data)
        myRequest("/admin/order/delivery", "post", data, function (res) {
            layer.msg(res.msg)
        });
    }
    function cancel() {
        parent.location.reload();

    }
    $('.form-group-list').append(`
            <div class="form-group dlh" style="display: flex;justify-content: flex-start;align-items: center;">
                <label style="color: #999;display: block;margin-top: 7px;">快递公司</label>
                <select name="delivery_id" class="select-list" name="type" style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 4.7vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;">
                    @foreach($list as $k=>$v)
                    <option value="{{$k}}">{{$v}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group" style="display: flex;justify-content: flex-start;align-items: center;">
                <label style="color: #999;display: block;margin-top: 7px;">快递单号</label>
                <input class="select-list" name="type" style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 4.7vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;" type="number" class="form-control" name="delivery_id">
            </div>
            `)
    function selectChange(e = 1) {
        console.log(e)
        $('.form-group-list').empty();
        if (e * 1 === 1) {
            $('.form-group-list').append(`
            <div class="form-group" style="display: flex;justify-content: flex-start;align-items: center;">
                <label style="color: #999;display: block;margin-top: 7px;">快递公司</label>
                <select name="delivery_id" class="select-list" name="type" style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 4.7vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;">
                    @foreach($list as $k=>$v)
                    <option value="{{$k}}">{{$v}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group" style="display: flex;justify-content: flex-start;align-items: center;">
                <label style="color: #999;display: block;margin-top: 7px;">快递单号</label>
                <input class="select-list" name="type" style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 4.7vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;" type="number" class="form-control" name="delivery_id">
            </div>
            `)
        }
        if (e == 2) {
            $('.form-group-list').append(`
            <div class="form-group" style="display: flex;justify-content: flex-start;align-items: center;">
                <label style="color: #999;display: block;margin-top: 7px;">送货人姓名</label>
                <input style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 3vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;" type="number" class="form-control" name="sh_delivery_name">
            </div>
            <div class="form-group" style="display: flex;justify-content: flex-start;align-items: center;">
                <label style="color: #999;display: block;margin-top: 7px;">送货人电话</label>
                <input style="width: 20vw;border-radius: 3px;border: solid 1px #ddd;color: #999;margin-left: 3vw;font-size: 15px;padding-left: 3px;box-sizing: border-box;" type="number" class="form-control" name="sh_delivery_id">
            </div>
            `)
        } else {

        }
    }
</script>
@endsection
